<template>
    <div class="vue-container">
        <div class="icif-title">
            <h3 v-if="userInfo.ST=='wghz2018'">请选择参加文博会场次</h3>
            <h3 v-else>请选择参会场次</h3>
        </div>
        <van-collapse v-model="activeName" accordion>
            <van-collapse-item v-for="(x,n) in icifList" :key="n" :title="x.Name" :name="n">
                <van-checkbox-group v-model="checkedList">
                    <div v-for="(y,m) in x.SubPrectices" :key="m" class="list-item" @click="checkToggle(y)">
                        <div class="list-content">
                            <h3>{{y.Name}}</h3>
                            <p>{{y.Content}}</p>                            
                        </div>
                        <van-checkbox :name="y.checkIdx" ref="checkboxes"/>
                    </div>                   
                </van-checkbox-group>
            </van-collapse-item>
        </van-collapse>
        <div class="bottom-btn">
            <van-button type="primary" @click="skipSubmit">跳过</van-button>
            <van-button type="primary" @click="submitForm">提交</van-button>
        </div>
    </div>
</template>

 <script>
import axios from "axios";
import $ from "jquery";
export default {
  name: "listPage",
  data() {
    return {
      activeName: 0,
      fieldIds: [],
      userInfo: null,
      icifList: [],
      checkedList: [],
      flag: null
    };
  },
  created() {
    // console.log(localStorage.getItem("userInfo"))
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    var that = this;
    axios({
      url: that.baseUrl + "/api/exhibition/getPrecticeList/" + that.userInfo.ST,
      method: "GET"
    })
      .then(res => {
        var idx = 0;
        if (this.$route.query.number && this.$route.query.number != "") {
          that.flag = true;
          that.userInfo.Number = this.$route.query.number;
          var listInfo = res.data;
          axios({
            url:
              that.baseUrl +
              "/api/exhibition/getAttendUserPrecticeList/" +
              that.userInfo.Number +
              "/" +
              that.userInfo.ST,
            method: "GET"
          })
            .then(res => {
              listInfo.forEach(i => {
                i.SubPrectices.forEach(j => {
                  that.$set(j, "checkIdx", idx);
                  res.data.forEach((item, index) => {
                    if (j.ID === item.SubPrecticeID) {
                      that.fieldIds.push(item.SubPrecticeID);
                      that.checkedList.push(idx);
                      that.$set(j, "isChecked", true);
                    } else {
                      that.$set(j, "isChecked", false);
                    }
                  });
                  idx++;
                });
              });
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          that.flag = false;
          res.data.forEach(i => {
            i.SubPrectices.forEach(j => {
              that.$set(j, "isChecked", false);
              that.$set(j, "checkIdx", idx);
              idx++;
            });
          });
        }
        that.icifList = res.data;
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    checkToggle(item) {
      // this.$refs.checkboxes[item.checkIdx].toggle();
      if (this.$refs.checkboxes[item.checkIdx].checked) {
        item.isChecked = false;
        this.fieldIds.splice(this.fieldIds.indexOf(item.ID), 1);
        this.checkedList.splice(this.checkedList.indexOf(item.checkIdx),1)
      } else {
        item.isChecked = true;
        this.fieldIds.push(item.ID);
        this.checkedList.push(item.checkIdx)
      }
    },
    submitForm() {
      if (this.fieldIds.length > 0) {
        this.fieldIds.forEach((item, index) => {
          if (index == 0) {
            this.userInfo.SubParallelSessions = item;
          } else {
            this.userInfo.SubParallelSessions += "|" + item;
          }
        });
        var that = this;
        $.ajax({
          url: that.baseUrl + "/api/user/UpdateSubParallelSessions",
          type: "POST",
          contentType: "application/json; charset=utf-8",
          data: JSON.stringify(that.userInfo),
          success: function(res) {
            that.$toast.clear();
            if (res.State) {
              localStorage.removeItem('userInfo')           
              window.location.href =
                that.baseUrl +
                "/Q/" +
                that.userInfo.ST +
                "/true?phone=" +
                that.userInfo.Phone;
            } else {
              that.$toast(res.Message);
            }
          }
        });
      } else {
        this.$toast("请先选择要参加的分会场场次");
      }
    },
    skipSubmit() {
      var that = this;
      this.$dialog
        .confirm({
          message: "确认跳过选择参加分会场场次？"
        })
        .then(() => {
          // on confirm
          localStorage.removeItem('userInfo')
          window.location.href =
            that.baseUrl +
            "/Q/" +
            that.userInfo.ST +
            "/true?phone=" +
            that.userInfo.Phone;
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>
 
 <style>
@import "../assets/css/common.css";
</style>
 